<template>
  <div>
    <el-dialog title="修改教师信息" :visible.sync="editShow" append-to-body>
      <TeacherEdit ref="childEdit" />
    </el-dialog>
    <el-dialog title="添加新尊师" :visible.sync="addShow" append-to-body>
      <TeacherAdd />
    </el-dialog>
    <!-- 查询按钮组 -->
    <el-row class="wc">
      <span>
        <el-button type="primary" @click="addTeac()" round>
          添加我的名师
        </el-button>
      </span>
    </el-row>
    <!-- 表格内容 -->
    <el-table
      :data="tableData"
      v-loading="loading"
      element-loading-text="拼命加载中"
      element-loading-spinner="el-icon-loading"
      element-loading-background="rgba(0, 0, 0, 0.8)"
      ref="btnTable"
      stripe
      style="width: 100%"
    >
      <el-table-column prop="teName" label="姓名" width="100" align="center">
      </el-table-column>
      <el-table-column prop="teStatus" label="身份" width="300" align="center">
      </el-table-column>
      <!-- 照片 -->
      <el-table-column prop="teImg" label="头像" width="100" align="center">
        <template slot-scope="scope">
          <el-popover placement="top-start" trigger="hover">
            <!-- 触摸大图 -->
            <img :src="scope.row.teImg" style="width: 150px; height: 150px" />
            <!-- 预览小图 -->
            <img
              slot="reference"
              :src="scope.row.teImg"
              style="width: 50px; height: 50px"
            />
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column prop="teIntroduce" label="名言内容"></el-table-column>
      <!-- 编辑组 -->
      <el-table-column fixed="right" label="操作" width="150">
        <template slot-scope="scope">
          <el-button type="text" @click="handleEdit(scope.$index, scope.row)">
            编辑
          </el-button>
          <!-- 分割线 -->
          <el-divider direction="vertical"></el-divider>
          <el-popconfirm
            confirm-button-text="好的"
            cancel-button-text="不用了"
            icon="el-icon-info"
            icon-color="red"
            title="这是你的尊师确定删除吗？"
            @confirm="Delete(scope.$index, scope.row)"
          >
            <el-button type="text" slot="reference">删除</el-button>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <!--closed代表动画结束后调用 -->
    <el-dialog
      title="温馨提示"
      :visible.sync="successVisible"
      width="20%"
      @close="refr"
      append-to-body
    >
      <div class="dialogSuc">
        <el-button
          type="success"
          icon="el-icon-check"
          circle
          @click="successVisible"
        ></el-button>
        <h2>{{ msgDialog }}</h2>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import TeacherEdit from "@/components/main/index2/edit/teacherEdit";
import TeacherAdd from "@/components/main/index2/add/teacherAdd";
export default {
  data() {
    const _this = this;
    return {
      input: "",
      editShow: false, //出表单编辑删除弹窗控制
      addShow: false,
      tableData: [],
      successVisible: false,//成功提示
      loading: true,
      msgDialog:"删除成功"//提示变量
    };
  },
  components: {
    TeacherEdit,
    TeacherAdd,
  },
  created() {
    const _this = this;
    // 打开页面向后端请求显示全部数据
    this.axios({
      method: "get",
      // 公共变量baseUrl已经定义在main.js.用于修改后端端口
      url: _this.baseUrl + "/index2/get/index2Teacher",
    }).then(function (resp) {
      console.log(resp)
       _this.tableData = resp.data;//el-table数据的前后交互 必须保证前后端pojo类名字一样
      for (let i = 0; i < _this.tableData.length; i++) {
        _this.tableData[i].teImg =
          _this.imgUrl + resp.data[i].teImg; //图片
      }
      _this.loading = false;
    });
  },
  methods: {
    successEdit() {
      this.editShow = false;
      this.msgDialog = "修改成功";
      this.successVisible = true;
    },
    successAdd() {
      this.editShow = false;
      this.msgDialog = "添加成功";
      this.successVisible = true;
    },
    // 按照ID号修改信息 index是显示行号,row是显示行的对象全部内容
    handleEdit(index, row) {
      console.log("传送前:" + row.id);
      this.editShow = true;
      //因为是懒加载,所以必须延迟100毫秒
      setTimeout(() => {
        this.$refs.childEdit.assignData(row.id);
      }, 100);
    },
    // 按照ID号删除 index是显示行号,row是显示行的对象全部内容
    Delete(index, row) {
      console.log(index, row.byxzId);
      const _this = this;
      this.axios({
          method: "get",
          // 公共变量baseUrl() 已经定义在main.js.用于修改后端端口
          url: _this.baseUrl+ "/index2/get/deleteTeacher/" + row.id,
        }).then(function (resp) {
          console.log(resp.data);
          _this.successVisible = true
        });
    },
    //跳转添加页面
    addTeac() {
      this.addShow = true;
    },
    //刷新页面 (删除成功后,给与提示信息,提示动画结束后调用)
    refr() {
      location.reload();
    }
  },
};
</script>

<style lang="less">
.dialogSuc {
  display: block;
  margin: 0 auto;
  width: 50%;
  button {
    display: block;
    margin: 0 auto;
  }
  h2 {
    color: green;
    text-align: center;
  }
}
</style>